<template>
  <button 
    class="base-button"
    :class="{ 
      'base-button--primary': type === 'primary',
      'base-button--secondary': type === 'secondary',
      'base-button--disabled': disabled
    }"
    :disabled="disabled"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  /**
   * 按钮类型
   */
  type: {
    type: String,
    default: 'primary',
    validator: (value: string) => {
      return ['primary', 'secondary'].includes(value)
    }
  },
  /**
   * 是否禁用
   */
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{
  (e: 'click'): void
}>()
</script>

<style scoped>
.base-button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.base-button--primary {
  background-color: #42b983;
  color: white;
}

.base-button--primary:hover {
  background-color: #359e75;
}

.base-button--secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
}

.base-button--secondary:hover {
  background-color: #e9e9e9;
}

.base-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.base-button--disabled:hover {
  background-color: inherit;
}
</style>
